<script setup lang="ts">
import {previewImage} from '@/api/file'
import {useUserInfoStore} from "@/stores/user_info";
import {useCommonStore} from "@/stores/common";
import {ref} from "vue";
import {getBaseUrl} from "@/utils/env";


const userInfo = useUserInfoStore()
const commonStore = useCommonStore()
const props = defineProps(['id'])
const url: any = getBaseUrl() + '/file/preview/image/' + props.id + '?token=' + userInfo.token.replace("Bearer ", "")
let urls: any = ref([])
urls.value.push(url)
const close = () => {
  commonStore.isPreview = false
}
</script>

<template>
  <div class="demo-image__preview">
    <el-image-viewer
        :url-list="urls"
        @close="close"
    />
  </div>
</template>

<style scoped lang="scss">
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>